<template>
  <div class="login" v-if="isPage == 0">
    <form action="JavaScript:;" class="login-from" >
      <input type="text" v-model="loginInfo.userName" placeholder="请输入用户名">
      <input type="password" v-model="loginInfo.password" placeholder="请输入密码">
      <input type="text" v-model="loginInfo.code" placeholder="验证码" class="verification">
      <button type="button" class="code" @click="getCode" :style="{backgroundColor,color}">{{code}}</button>
      <div class="setting_btn">
        <a href="JavaScript:;" @click="isPage = 2">修改密码</a>
        <a href="JavaScript:;" @click="isPage = 1">忘记密码</a>
      </div>
      <button class="btn" @click="login">登录</button>
    </form>
  </div>
  <retrieve v-else-if="isPage == 1"></retrieve>
  <updata v-else></updata>
</template>

<script>
import { mapActions } from 'vuex';
import tool from '../../assets/js/tool'
import Retrieve from './retrieve'
import Updata from './updata.vue'
export default {
  name: 'Login',

  data() {
    return {
      code: tool.GetCode(4), // 生成的随机验证码
      backgroundColor: tool.GetRandomColor(), // 生成随机背景色
      color: tool.GetRandomColor(), // 生成随机字体颜色
      loginInfo: { // 登录信息
        userName: '', // 用户名
        password: '', // 密码
        code: '', // 验证码
      },
      isPage: 0 // 切换索引
    };
  },

  methods: {
    //登录页面的随机验证码
    getCode(){
      this.code = tool.GetCode(4)
      this.backgroundColor = tool.GetRandomColor()
      this.color = tool.GetRandomColor()
    },
    //登录
    login(){
      let loginInfo = this.loginInfo
      if(this.code != loginInfo.code){
        this.showHint({title:'验证码错误',isFlag:false})
      }else if(loginInfo.userName.trim() == '' || loginInfo.password.trim() == ''){
        this.showHint({title:'用户名和密码不能为空',isFlag:false})
      }else{
        this.$emit('changeLogin', loginInfo);
      }
    },
    ...mapActions(['showHint'])
  },

  components: {
    Retrieve,Updata
  }
};
</script>

<style scoped>
.code{
  letter-spacing: 3px;
  font-size: 18px;
  font-weight: 600;
}
.setting_btn{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.setting_btn a{
  color: gray;
}
.setting_btn a:hover{
  color: red;
}
</style>